<template>
  <!-- 通用审批详情弹框 -->
  <a-modal
    class="approval-dialog"
    :footer="null"
    :title="title"
    :closable="true"
    :visible="visible"
    width="1200px"
    @cancel="handleClose"
  >
    <!-- <a-tabs v-model="key" type="card" class="mb20" @change="tabChange">
      <a-tab-pane key="1" :tab="tab1.label" v-if="tab1.status"></a-tab-pane>
      <a-tab-pane key="2" :tab="tab2.label" v-if="tab2.status"></a-tab-pane>
    </a-tabs> -->
    <img style="width: 100%" :src="flowChart" />
    <s-table
      ref="ApprovetableCurrent"
      bordered
      size="default"
      row-key="key"
      :columns="columnApproveCurrent"
      :data="loadDataCurrent"
      :alert="true"
      show-size-changer
      show-quick-jumper
      :show-pagination="false"
    >
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
      <template slot="opinions" slot-scope="text">
        <ellipsis :length="30" tooltip>
          {{ text }}
        </ellipsis>
      </template>
      <template slot="userName" slot-scope="text">
        <ellipsis :length="50" tooltip placement="right">
          {{ text }}
        </ellipsis>
      </template>
    </s-table>
  </a-modal>
</template>

<script>
import { getFlowChart } from '@/api/process'
import BaseModal from '@/components/BaseModal'
import { STable } from '@/components'
import { Ellipsis } from '@/components'
import { getCurrentProcessList } from '@/utils/requestWithParams.js'

const columnApproveCurrent = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: 65,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '节点名称',
    dataIndex: 'taskName'
  },
  {
    title: '处理人',
    dataIndex: 'userName',
    scopedSlots: { customRender: 'userName' }
  },
  {
    title: '处理结果',
    dataIndex: 'processStatusName',
    width: 120
  },
  {
    title: '审批意见',
    dataIndex: 'opinions',
    scopedSlots: { customRender: 'opinions' },
    width: 300
  },
  {
    title: '开始时间',
    dataIndex: 'createTime',
    width: 120
  },
  {
    title: '滞留时间',
    dataIndex: 'durationInMillis',
    width: 120
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    width: 120
  }
]
const columnApprove = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: 80,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '节点名称',
    dataIndex: 'name'
  },
  {
    title: '发起人',
    dataIndex: 'userName'
  },
  {
    title: '发起时间',
    dataIndex: 'startTime'
  },
  {
    title: '滞留时间',
    dataIndex: 'durationTime'
  },
  {
    title: '结束时间',
    dataIndex: 'endTime'
  }
]
const columnApproveDetail = [
  {
    title: '审批人',
    dataIndex: 'userName'
  },
  {
    title: '审批时间',
    dataIndex: 'createTime'
  },
  {
    title: '节点名称',
    dataIndex: 'taskName'
  },
  {
    title: '滞留时间',
    dataIndex: 'durationInMillis'
  },
  {
    title: '审批意见',
    dataIndex: 'formData.opinions',
    scopedSlots: { customRender: 'formData.opinions' },
    width: 300
  }
]
export default {
  name: 'ApprovalDetails',
  components: {
    BaseModal,
    STable,
    Ellipsis
  },
  props: {
    title: {
      type: String,
      default: '审批详情'
    },
    visible: {
      type: Boolean,
      default: false
    },
    businessId: {
      type: String,
      default: ''
    },
    tab1: {
      type: Object,
      default: () => ({
        label: '当前流程',
        status: true
      })
    },
    tab2: {
      type: Object,
      default: () => ({
        label: '历史流程',
        status: true
      })
    }
  },
  data() {
    this.columnApprove = columnApprove
    this.columnApproveCurrent = columnApproveCurrent
    this.columnApproveDetail = columnApproveDetail
    return {
      approveInfos: [],
      spinning: false,
      key: '',
      flowChart: '',
      loadDataCurrent: () => {
        if (this.key === '') return
        return getCurrentProcessList.call(this, { businessId: this.businessId })
      }
    }
  },
  created() {},
  methods: {
    tabChange(key) {
      this.businessId = this.businessId.replace(/_record/, '')
      this.flowChart = ''
      if (Number(key) === 2) {
        this.$emit('changeBusinessId', this.businessId, (newbusinessId) => {
          this.businessId = newbusinessId
        })
      }
      this.getFlowChart()
      this.$refs.ApprovetableCurrent.refresh()
    },
    handleClose() {
      this.$emit('confirm')
    },
    getFlowChart() {
      this.spinning = true
      getFlowChart(this.businessId)
        .then((res) => {
          this.spinning = false
          if (res.code === 200) {
            this.flowChart = 'data:image/png;base64,' + res.data
          }
        })
        .catch(() => {
          this.spinning = false
        })
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.$nextTick(() => {
          this.key = '1'
          this.businessId = this.businessId.replace(/_record/, '')
          this.getFlowChart()
          if (this.$refs.ApprovetableCurrent) {
            this.$refs.ApprovetableCurrent.refresh()
          }
        })
      } else {
        this.flowChart = ''
        if (this.$refs.ApprovetableCurrent) {
          this.$refs.ApprovetableCurrent.localDataSource = []
        }
      }
    }
  }
}
</script>

<style>
.approval-dialog {
  position: relative;
  z-index: 9999999999;
}
</style>

